
import React, { ReactChild, ReactElement } from 'react';
import classNames from 'classnames';
import { ITabItemProps } from './Tab';

interface ITabsProps {
  activeKey?: string;
  onChange: (activeKey: string) => void;
  children?: Array<React.ReactElement<ITabItemProps>>;
  className?: string;
  style?: React.CSSProperties;
  align?: string;
}

export class Tabs extends React.Component<ITabsProps, {}> {

  public render() {
    const { activeKey, onChange, className, style } = this.props;
    const position = {
      'align-center': this.props.align === 'center',
      'align-right': this.props.align === 'right',
      'align-left': this.props.align === 'left',
    };
    return (
      <span>
        <div className={classNames('br-tabs', className)} style={style}>
          <div className={classNames('br-tabs__head', position)} >
            {
              React.Children.map<ReactElement<ITabItemProps>>(this.props.children,
                (child: ReactChild) => {
                  const ele = child as ReactElement<ITabItemProps>;
                  return (
                    <li>
                      {
                        React.cloneElement(ele, {
                          onChange,
                          active: activeKey === ele.props.value ? true : false,
                        })
                      }
                    </li>
                  );
                })
            }
          </div>
        </div>
      </span>
    );
  }
}

/**
 * <Tabs activeKey="tab2">
 *   <Tab value="tab1" active={false}>按钮</Tab>
 * </Tabs>
 */
